import { HIcon } from "@/components";
import { CustomerEconomicInfo, IDictionaries, UserInfo } from "@/service/type";
import { validateErrorHandler } from "@/utils/validate";
import { View, Text, Textarea } from "@tarojs/components";
import Form, { Field, FormInstance } from "rc-field-form";
import { FC } from "react";
import { AtButton, AtDrawer } from "taro-ui";
import { Keys } from "../../useData";
import styles from "./index.module.less";

interface IProps {
  form: FormInstance<UserInfo>;
  userInfo: Partial<UserInfo>;
  onSave: (data: Partial<UserInfo>) => void;
  onShowDrawerPanel: (name: Keys, type: IDictionaries) => void;
}
const Character: FC<IProps> = (props) => {
  const { form, userInfo, onSave, onShowDrawerPanel } = props;
  return (
    <Form
      className={styles["character-wrapper"]}
      form={form}
      component="view"
      initialValues={{
        ...userInfo.customerCharacter,
      }}
      onFinishFailed={validateErrorHandler}
      onFinish={() =>
        onSave({
          customerCharacter: {
            ...userInfo.customerCharacter,
            ...form.getFieldsValue(),
          },
        })
      }
    >
      <Field
        name="alcoholAndTobacco"
        rules={[{ required: true, message: "请选择饮酒情况" }]}
        children={({ value }) => (
          <View
            className={styles["label-wrapper"]}
            onClick={() =>
              onShowDrawerPanel(
                "alcoholAndTobacco",
                IDictionaries.alcoholAndTobacco
              )
            }
          >
            <View className={styles["left"]}>
              <Text className={styles["require"]}>*</Text>喝酒
            </View>
            <View className={styles["content"]}>
              {form.getFieldValue("alcoholAndTobaccoCn")}
            </View>
            <HIcon type="youjiantou1" color="#999"></HIcon>
          </View>
        )}
      ></Field>

      <Field
        name="appearance"
        rules={[{ required: true, message: "请选择外貌信息" }]}
        children={({ value }) => (
          <View
            className={styles["label-wrapper"]}
            onClick={() =>
              onShowDrawerPanel("appearance", IDictionaries.appearance)
            }
          >
            <View className={styles["left"]}>
              <Text className={styles["require"]}>*</Text>外貌
            </View>
            <View className={styles["content"]}>
              {form.getFieldValue("appearanceCn")}
            </View>
            <HIcon type="youjiantou1" color="#999"></HIcon>
          </View>
        )}
      ></Field>

      <Field
        name="characterTags"
        rules={[{ required: true, message: "请选择性格信息" }]}
        children={({ value }) => (
          <View
            className={styles["label-wrapper"]}
            onClick={() =>
              onShowDrawerPanel("characterTags", IDictionaries.characterTags)
            }
          >
            <View className={styles["left"]}>
              <Text className={styles["require"]}>*</Text>性格
            </View>
            <View className={styles["content"]}>
              {form.getFieldValue("characterTagsCn")}
            </View>
            <HIcon type="youjiantou1" color="#999"></HIcon>
          </View>
        )}
      ></Field>

      <Field
        name="hobbyTags"
        rules={[{ required: true, message: "请选择兴趣爱好信息" }]}
        children={({ value }) => (
          <View
            className={styles["label-wrapper"]}
            onClick={() =>
              onShowDrawerPanel("hobbyTags", IDictionaries.hobbyTags)
            }
          >
            <View className={styles["left"]}>
              <Text className={styles["require"]}>*</Text>兴趣爱好
            </View>
            <View className={styles["content"]}>
              {form.getFieldValue("hobbyTagsCn")}
            </View>
            <HIcon type="youjiantou1" color="#999"></HIcon>
          </View>
        )}
      ></Field>

      <AtButton className={styles["btn"]} onClick={form.submit}>
        保存
      </AtButton>
    </Form>
  );
};

export default Character;
